<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery-3.7.1.min.js"></script>
    <script src="../js/bootstrap.bundle.js"></script>
    <link  rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>
    <title>警告</title>
</head>
<body>
    <!-- .alert警告框的基础类 -->
    <!-- .alert-danger控制警告框显示为红色 -->
    <!-- .alert-dismissible让警告框可以关闭 -->
    <!-- .fade让警告框关闭时有渐隐动画 -->
    <!-- .show显示警告 -->
    <div class="alert alert-danger alert-dismissible fade show">
        <strong>危险！</strong>在这个网站上检测到病毒！
        <!-- data-dismiss="alert"让按钮点击时可以关闭警告 -->
        <!-- &times;给按钮添加一个×，注意这是乘号，不是x -->
        <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
<!-- 修改警告的颜色 -->
    <div class="alert alert-success alert-dismissible fade" id="login-success">
       登录成功
        <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
<!-- 警告结合图标 -->
    <div class="alert alert-danger alert-dismissible fade show">
       <h4 class="alert-heading"><i class="fa fa-angry"></i>危险！</h4>
       <p>当心病毒</p>
       <hr>
       <p>请启用防火墙来确保安全</p>
         <button type="button" class="close" data-dismiss="alert">&times;</button>
     </div>
     <!-- 不使用alert-dismissible和data-dismiss="alert"，然后手动控制警告关闭 -->
     <div class="alert alert-danger  fade show">
        <strong>危险！</strong>危险警告！
        <!-- .alert-link控制超链接颜色配合警告的颜色  -->
        <a href="#" class="alert-link">预防措施</a>
        <!-- data-dismiss="alert"让按钮点击时可以关闭警告 -->
        <!-- &times;给按钮添加一个×，注意这是乘号，不是x -->
        <button type="button" class="close close-alert" >&times;</button>
    </div>
<!-- 点击登录按钮，显示登录成功，使用jQuery控制警告的显示 -->
    <button class="btn btn-primary" id="login">登录</button>

    
</body>
<script>
    // 通过jQuery关闭警告
    $(document).ready(function(){
        // 给关闭按钮绑定点击事件
        $(".close-alert").click(function(){
            // 按钮被点击时获取按钮的父元素，也就是带有alert类的div，然后移除div的.show实现警告的关闭
            $(this).parent().removeClass("show");
        });
        // 控制点击登录按钮弹出登录成功提示框
        $("#login").click(function(){
            $("#login-success").addClass("show");
        });


    })
</script>

</html>